<template>
  <div style=" background: #0d284c85;">
    <table>
      <tr>
        <td style="width: 606px;font-size:16px" colspan="2" rowspan="2">市领导主抓直管多跨场景应用</td>
        <td colspan="3">场景类型</td>
        <td colspan="2">是否立项</td>
        <td colspan="3">场景进度</td>
      </tr>
      <tr>
        <td>揭榜</td>
        <td>试点</td>
        <td>其他</td>
        <td>是</td>
        <td>否</td>
        <td>采购中</td>
        <td>建设中</td>
        <td>完工</td>

      </tr>
      <tr>
        <td colspan="2"><div class="hoverClass" @click="gotoData()"><span class="number">50</span>个</div></td>
        <td><div class="hoverClass"><span class="number">2</span>个</div></td>
        <td><div class="hoverClass"><span class="number">4</span>个</div></td>
        <td><div class="hoverClass"><span class="number">4</span>个</div></td>
        <td><div class="hoverClass"><span class="number">6</span>个</div></td>
        <td><div class="hoverClass"><span class="number">11</span>个</div></td>
        <td><div class="hoverClass"><span class="number">3</span>个</div></td>
        <td><div class="hoverClass"><span class="number">6</span>个</div></td>
        <td><div class="hoverClass"><span class="number">8</span>个</div></td>
      </tr>
    </table>
  </div>
</template>

<script>
// import tableCommon from '@/components/tableCommon/index.vue';
export default {
  name: 'ShowTable',
  components: {
    // tableCommon,
  },
  provide: {
    isShow: false
  },
  data() {
    return {
      dialogVisible: false,
      formGuid: '',
      menuId: '',
      title: ''
    };
  },
  methods: {
    gotoData() {
      const params = {
        path: '/frqox/frqox/yshmu',
        query: {
          title: '市直领导主抓项目',
          isHideLeft: 1,
          isHideTop: 1
        }

      };

      const routeUrl = this.$router.resolve(params);
      const tempwindow = window.open('_blank'); // 先打开页面
      tempwindow.location = routeUrl.href; // 后更改页面地址
    }

  }
};
</script>

<style scoped lang="scss" >
    td {
      border: 1px solid #143c6e;
      text-align: center;
      height: 40px;
      line-height: 20px;
      padding: 10px;
      width: 80px;
      color: #ced1da;
      font-weight: bolder;
      font-size:15px;
      font-weight: bolder
    }

    table {
        border-collapse: collapse;
    }
    .hoverClass:hover{
      cursor: pointer;
      text-decoration: underline
    }
    .dialogWrap /deep/ .el-dialog__header {
      border-bottom: 1px solid #cec9c9;
      padding: 10px;
      background-color: #0840a9 !important;
    }
     .dialogWrap /deep/ .el-dialog__title {
      line-height: 24px;
      font-size: 18px;
      color: #fff !important;
      font-weight: bolder;
    }
    .dialogWrap /deep/ .el-dialog__body {
    padding: 0px;
    color: #606266;
    font-size: 15px;
    }
    .number{
      text-decoration: underline;
      margin-right: 5px;
    }

</style>
